{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/scss_@mixin_문법_사용해서_hover값_주기/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"1a55cba4-646e-5fa9-bb67-bbcce5642d70","excerpt":"","html":"
$icons: (\n  sprite-instagram: (\n    width: 40px,\n    height: 40px,\n    background-position-x: -4px,\n    background-position-y: -56px,\n  ),\n)\n$icon-width: 1000px;\n\n@mixin icon($name, $width, $height) {\n  $rate: (map-deep-get($icons, $name, \"width\") / $width);\n  display: block;\n  background-image: url('/assets/img/image-sprite/icons.png');\n  background-size: $icon-width / $rate auto;\n  background-position-x: map-deep-get($icons, $name, \"background-position-x\")/$rate;\n  background-position-y: map-deep-get($icons, $name, \"background-position-y\")/$rate;\n  width: $width;\n  height: $height;\n}\n\n@mixin icon_hover($name, $width) {\n  $rate: (map-deep-get($icons, $name, \"width\") / $width);\n  background-position-x: map-deep-get($icons, $name, hover, \"background-position-x\")/$rate;\n  background-position-y: map-deep-get($icons, $name, hover, \"background-position-y\")/$rate;\n}\n\n@mixin resize-icons($resize-icons) {\n  @each $name, $width, $height in $resize-icons {\n    .#{$name} {\n      @include icon($name, $width, $height);\n\n      @if map-deep-get($icons, $name, hover) {\n        &:hover {\n          @include icon_hover($name, $width);\n        }\n      }\n    }\n  }\n}
","frontmatter":{"title":"scss @mixin 문법 사용해서 hover값 주기","date":"March 16, 2020"}}},"pageContext":{"slug":"/Today I Learned/scss_@mixin_문법_사용해서_hover값_주기/","previous":{"fields":{"slug":"/Today I Learned/repeat_animation_by_clicking_button/"},"frontmatter":{"title":"repeat animation by clicking button","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/How_to_debug_on_whether_observable_is_unsubscribe/"},"frontmatter":{"title":"How to debug on whether observable is unsubscribe","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}